<template>
  <div :class="['pui-checkbox', block && 'block', border && 'border', disabled && 'disabled-border', size]" @click="changeCheckboxHandle()">
    <div :class="['pui-checkbox_content', disabled && 'disabled']">
      <div :class="['pui-checkbox_frame', modelValue && 'checked']">
        <pui-icon pui-icon:class="[!modelValue && 'not-show']" name="check" size="small"></pui-icon>
      </div>
      <div class="pui-checkbox_label">{{ label }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pui-checkbox',
});
</script>

<script setup lang="ts">
import type { Props } from './interface';

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  size: 'normal',
  label: '复选框',
  block: false,
  border: false,
  disabled: false,
});
const emits = defineEmits<{
  'update:modelValue': [val: boolean];
}>();

const changeCheckboxHandle = () => {
  if (props.disabled) return;
  emits('update:modelValue', !props.modelValue);
};
</script>
